<template>
  <div class='message'>
    <div class="head_wrap">
      <div class="clear_badge">
        <span>消息</span>
        <!-- <span>({{msgTotal}})</span> -->
        <!-- <van-icon :name="require('@/assets/img/message/clear.png')" />
        <p>清除未读</p> -->
      </div>

    </div>
    <div class="msg_list">
      <van-list v-model="loading" :finished="finished" :error.sync="err" error-text="加载失败，点击这里重试" @load="getMessageList">
        <van-cell class="msg_item" :border="false" center @click="openChat">
          <template #icon>
            <van-image :src="require('../../assets/img/chat/msg.png')" fit="cover" />
          </template>

          <template #title>
            <div class="row1">
              <div class="name">系统消息</div>
              <div class="time">{{$moment(Number(notice.add_time) * 1000).format('YYYY-MM-DD HH:mm:ss')}}</div>
            </div>
            <div class="row2">
              <div class="msg">{{notice.summary}}</div>
              <div>
                <van-badge v-if="countnotice>0" :content="countnotice" max="99" />
              </div>
            </div>
          </template>
        </van-cell>
        <!-- <van-cell class="msg_item" v-for="(item, index) in list" :key="index" :border="false" center @click="openChat(item)">
          <template #icon>
            <van-image :src="`${resourceURL}${item.imagesurl}`" fit="cover" />
          </template>

          <template #title>
            <div class="row1">
              <div class="name">{{item.shop_name}}</div>
              <div class="time">{{$moment(Number(item.update_time) * 1000).format('YYYY-MM-DD HH:mm:ss')}}</div>
            </div>
            <div class="row2">
              <div class="msg">{{item.msg}}</div>
              <div>
                <van-badge v-if="item.msg_num>0" :content="item.msg_num" max="99" />
              </div>
            </div>
          </template>
        </van-cell> -->
        <van-empty v-if="list.length==0 && !loading" />
      </van-list>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data () {
    return {
      avatar: require("@/assets/img/message/msg-avatar.png"),
      items: [
        {
          text: "预订信息",
          icon: require("@/assets/img/message/make.png"),
        },
        {
          text: "交易物流",
          icon: require("@/assets/img/message/logistics.png"),
        },
      ],
      list: [],
      notice: [],
      countnotice: 0,
      err: false,
      loading: false,
      finished: false,
      page: 1,
      limit: 10,
    };
  },
  methods: {
    getSimpleText (html) {
      if (!html) return html;
      const re1 = new RegExp("<.+?>", "g"); // 匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      const arrEntities = {
        lt: "<",
        gt: ">",
        nbsp: " ",
        amp: "&",
        quot: '"',
        ldquo: "“",
        mdash: "—",
        rdquo: "”",
      };
      return html
        .replace(re1, "")
        .replace(
          /&(lt|gt|nbsp|amp|quot|ldquo|mdash|rdquo);/gi,
          function (all, t) {
            return arrEntities[t];
          }
        );
    },
    openChat () {
      this.$router.push({ name: "notice" });
    },
    openNotice (chat) {
      this.$router.push({ name: "chat", query: { shop_id: chat.shop_id } });
    },
    // 获取聊天列表
    getMessageList () {
      this.loading = true;
      if (this.loading) {
        Toast.loading({ message: "加载中...", forbidClick: true });
      }
      this.$axios
        .get(this.$api.chatroomtokenlist, {
          params: {
            page: parseInt(this.list.length / this.limit) + 1, //页码
            limit: this.limit, //每页条数
          },
        })
        .then((res) => {

          if (res.data.code == 1) {
            Toast.clear();
            let result = res.data.data;
            this.list.push(...result.data);

            this.loading = false;
            if (result.data.length < this.limit) {
              this.finished = true; // 大于所有条数则结束加载
            }
            if (result.length > this.limit) this.page++;
          } else {
            // 加载失败时
            this.err = true;
            this.loading = false;
          }
        });
    },
    getnoticeList () {
      this.$axios
        .get(this.$api.noticelist)
        .then((res) => {
          if (res.data.code == 1) {
            console.log(res.data);
            this.notice = res.data.data.data[0]
            console.log(this.notice);
          }
        });
      this.$axios
        .get(this.$api.countnotice)
        .then((res) => {
          if (res.data.code == 1) {
            console.log(res.data);
            this.countnotice = res.data.data
          }
        });
    },
  },
  created () {
    this.getnoticeList()
  }

};
</script>

<style scoped lang='less'>
.message {
  .head_wrap {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 12px 16px;

    //background-color: #fff;
    box-sizing: border-box;
    p {
      margin: 0;
      font-size: 12px;
      font-family: Microsoft YaHei-Light, Microsoft YaHei;
      font-weight: 300;
      color: #b9b9b9;
    }
    .clear_badge {
      display: flex;
      align-items: center;

      span {
        color: #303030;
        font-size: 18px;
        font-weight: bold;
        margin-right: 10px;
      }
      .van-icon {
        font-size: 18px;
      }
    }
    .msg_type {
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      .van-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-bottom: 6px;
      }
      .text {
        color: #470607;
        font-size: 14px;
      }
    }
  }
  .msg_list {
    height: 100%;
    min-height: calc(100vh - 58px);
    padding: 0 16px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 16px 16px 0px 0px;
    .msg_item {
      padding: 12px 0;
      border-bottom: 1px solid #f1f1f1;
      .van-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 12px;
        overflow: hidden;
      }
      .row1 {
        display: flex;
        justify-content: space-between;
        .name {
          color: #470607;
          font-size: 14px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .time {
          font-size: 10px;
          color: #b9b9b9;
        }
      }
      .row2 {
        display: flex;
        justify-content: space-between;
        .msg {
          width: 250px;
          color: #b9b9b9;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
